<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <table border="1" cellspacing="0" style="width: 100%;text-align: center;font-size: 20px;" align="center">
        <tr>
          <td colspan="6" style="width: 50%;height: 40px;font-size: 35px;">借用单</td>
        </tr>
        <tr>
          <td>出库单号</td>
          <td>{{ formData.boCode }}</td>
          <td>出库人员</td>
          <td>{{ formData.outUserName }}</td>
          <td>出库日期</td>
          <td>{{ formData.outDate }}</td>
        </tr>
        <tr>
          <td>借用人员</td>
          <td>{{ formData.borrowUserName }}</td>
          <td>计划归还日期</td>
          <td>{{ formData.planReturnDate }}</td>
          <td>借用天数</td>
          <td>{{ formData.borrowDays }}</td>
        </tr>
        <tr style="height: 100px">
          <td>备注</td>
          <td colspan="5" style="text-align: left;">{{ formData.memo }}</td>
        </tr>
      </table>
      <table
        border="1"
        cellspacing="0"
        style="width: 100%;text-align: center;font-size: 20px"
        align="center"
      >
        <tr style="height: 60px">
          <td colspan="8" style="text-align: left;height: 20px;">物料明细</td>
        </tr>
        <tr style="height: 80px">
          <td>物料编码</td>
          <td>物料名称</td>
          <td>规格型号</td>
          <td>计量物料单位</td>
          <td>出库数量</td>
          <td>批号</td>
          <td>出库库位</td>
          <td>出库库房</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index" style="height: 80px">
          <td>{{ item.goodsCode }}</td>
          <td>{{ item.goodsName }}</td>
          <td>{{ item.size }}</td>
          <td>{{ item.unit }}</td>
          <td>{{ item.outNum }}</td>
          <td>{{ item.piNo }}</td>
          <td>{{ item.slName }}</td>
          <td>{{ item.shName }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { getById } from '@/api/wms_outStorageManage/borrowOutStorage/borrowOutStorage'
export default {
  name: 'PrintBorrowOutStorage',
  components: {},
  props: {
    printId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      formData: {},
      tableData: []
    }
  },
  watch: {
    printId(val) {
      if (val) {
        Promise.all([
          getById({ boId: this.printId }).then(res => {
            return res
          })
        ]).then(array => {
          this.formData = Object.assign({}, this.formData, array[0].data)
          this.tableData = array[0].data.tableData
        }).then(() => {
          this.print()
        })
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
        // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    }
  }
}
</script>
<style scoped>
  .el-table--border:after,.el-table--group:after,.el-table:before {
    background-color: red;
  }

  .el-table--border,.el-table--group {
    border-color: red;
  }

  .el-table td,.el-table th.is-leaf {
    border-bottom: 1px solid red;
  }

  .el-table--border th,.el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid red;
  }

  .el-table--border td,.el-table--border th {
    border-right: 1px solid red;
  }
</style>
